<%@page import="com.winexpress.util.SessionAttributes"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>wineXpress Admin Home</title>
        <!--<script src="/WineXpressClient/resources/js/bootstrap.js"></script>-->
        <script src="/WineXpressClient/resources/js/modern-business.js"></script>
        <!--<script src="/WineXpressClient/resources/js/bootstrap.js"></script>-->
        <script src="/WineXpressClient/resources/js/bootstrapValidator.js"></script>
        <link href="/WineXpressClient/resources/css/morris.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <t:adminNavigation/>
        <br><br>
        <div class="container">
            <div>
                <h3 style="text-align: center;">Statistics Over the Last 7 Days</h3>
                <table class="table table-striped table-bordered">
                    <tr class="info">
                        <td>
                            Total Page Views:
                        </td>
                        <td>
                            <%=session.getAttribute("totalPageViews")%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Total Visits:
                        </td>
                        <td>
                            <%=session.getAttribute("totalVisits")%>
                        </td>
                    </tr>
                    <tr class="info">
                        <td>
                            Total New Visits:
                        </td>
                        <td>
                            <%=session.getAttribute("totalNewVisits")%>
                        </td>
                    </tr> 
                    <tr>
                        <td>
                            Unique Visitors:
                        </td>
                        <td>
                            <%=session.getAttribute("uniqueVisitos")%>
                        </td>
                    </tr>
                    <tr class="info">
                        <td>
                            Avg. Visit Duration:
                        </td>
                        <td>
                            <%=session.getAttribute("avgVisitDuration_hour")%> : <%=session.getAttribute("avgVisitDuration_min")%> : <%=session.getAttribute("avgVisitDuration_sec")%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Bounce Rate: 
                        </td>
                        <td>
                            <%=session.getAttribute("bounceRate")%>
                        </td>
                    </tr>
                    <tr class="info">
                        <td>
                            % New Visits:  
                        </td>
                        <td>
                            <%=session.getAttribute("percentNewVisits")%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Pages / Visit:  
                        </td>
                        <td>
                            <%=session.getAttribute("pagesPerVisit")%>
                        </td>
                    </tr>
                </table>
                <div>
                    <!--LINE CHART-Page Views-->         
                    <br/>
                    <div style="border: solid;">
                        <div class="col-md-4" style="width: 33%;">
                            <!--LINE CHART-Page Views-->         
                            <div class="box box-info">
                                <div class="box-header">
                                    <h3 class="box-title">Page Views</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="chart" id="line-chart-Page-Views" style="height: 300px;"></div>
                                </div> <!--/.box-body -->
                            </div> <!--/.box--> 
                        </div>
                        <div class="col-md-4" style="width: 33%;">
                            <!--LINE CHART-Page Views-->         
                            <div class="box box-info">
                                <div class="box-header">
                                    <h3 class="box-title">Visits</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="chart" id="line-chart-Visits" style="height: 300px;"></div>
                                </div> <!--/.box-body -->
                            </div> <!--/.box--> 
                        </div>
                        <div class="col-md-4" style="width: 33%;">
                            <!--LINE CHART-Page Views-->         
                            <div class="box box-info">
                                <div class="box-header">
                                    <h3 class="box-title" style="alignment-adjust: central;">New Visits</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="chart" id="line-chart-New-Visits" style="height: 300px;"></div>
                                </div> <!--/.box-body -->
                            </div> <!--/.box--> 
                        </div>
                    </div>
                </div>
            </div>
            <!--Morris.js charts-->
            <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
            <script src="/WineXpressClient/resources/js/morris.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(function() {
                    "use strict";
                    // LINE CHART: Page Views
                    var line1 = new Morris.Line({
                        element: 'line-chart-Page-Views',
                        resize: true,
                        data: [
                            {day: ${day1}, pageViews:${pageViewsDay1}},
                            {day: ${day2}, pageViews:${pageViewsDay2}},
                            {day: ${day3}, pageViews:${pageViewsDay3}},
                            {day: ${day4}, pageViews:${pageViewsDay4}},
                            {day: ${day5}, pageViews:${pageViewsDay5}},
                            {day: ${day6}, pageViews:${pageViewsDay6}},
                            {day: ${day7}, pageViews:${pageViewsDay7}}
                        ],
                        xkey: 'day',
                        ykeys: ['pageViews'],
                        labels: ['Page Views'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'auto',
                        parseTime: false
                    });

                    // LINE CHART: Visits
                    var line2 = new Morris.Line({
                        element: 'line-chart-Visits',
                        resize: true,
                        data: [
                            {day: ${day1}, visits:${visitsDay1}},
                            {day: ${day2}, visits:${visitsDay2}},
                            {day: ${day3}, visits:${visitsDay3}},
                            {day: ${day4}, visits:${visitsDay4}},
                            {day: ${day5}, visits:${visitsDay5}},
                            {day: ${day6}, visits:${visitsDay6}},
                            {day: ${day7}, visits:${visitsDay7}}
                        ],
                        xkey: 'day',
                        ykeys: ['visits'],
                        labels: ['Visits'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'auto',
                        parseTime: false
                    });

                    // LINE CHART: New Visits
                    var line3 = new Morris.Line({
                        element: 'line-chart-New-Visits',
                        resize: true,
                        data: [
                            {day: ${day1}, newVisits:${newVisitsDay1}},
                            {day: ${day2}, newVisits:${newVisitsDay2}},
                            {day: ${day3}, newVisits:${newVisitsDay3}},
                            {day: ${day4}, newVisits:${newVisitsDay4}},
                            {day: ${day5}, newVisits:${newVisitsDay5}},
                            {day: ${day6}, newVisits:${newVisitsDay6}},
                            {day: ${day7}, newVisits:${newVisitsDay7}}
                        ],
                        xkey: 'day',
                        ykeys: ['newVisits'],
                        labels: ['New Visits'],
                        lineColors: ['#3c8dbc'],
                        hideHover: 'auto',
                        parseTime: false
                    });
                });
            </script>
            <t:footer/>
    </body>
</html>

